<template>
	<view class="container">
		<view class="bookDeatil">
			<view class="bookImage">
				<uv-image radius="8rpx" :src="img" width="420rpx" height="292rpx"></uv-image>
			</view>
			<view class="detail">
				<uv-text size="20" class="ellipsis" :text="getData.bookName"></uv-text>
				<view class="teacher_study">


					<view class="author">
						<uv-text class="ellipsis" size="16" text="来源:" color="#86909C"></uv-text>
						<uv-text class="name" size="16" color="#008BFF" :text="getData.author"></uv-text>
					</view>
					<view class="press">
						<uv-text color="#86909C" text="学习人数:" style="width: 220rpx;"></uv-text>
						<uv-text class="study" size="16" color="#51575e" :text="views"></uv-text>
					</view>
					<!-- 
					<view class="publication_time">
						<uv-text class="item" text="收藏人数:" color="#86909C"></uv-text>
						<uv-text class="itemNum" text="21"></uv-text>
					</view> -->
				</view>
			</view>
		</view>
		<view class="read_button">
			<uv-row gutter="12">
				<uv-col span="8">
					<uv-button @click="play" :custom-style="customStyle" size="large" text="开始观看"
						type="primary"></uv-button>
				</uv-col>
				<uv-col span="3">
					<uv-button @click="stars" v-if="data.stars==false" :custom-style="customStyle2"
						:icon="unstaring" size="large" text="收藏"></uv-button>
					<uv-button v-else @click="stars" :custom-style="customStyle2" :icon="staring"
						size="large" text="已收藏"></uv-button>
				</uv-col>
			</uv-row>
		</view>
		<view class="segmentedControl">
			<uni-segmented-control class="controller" :current="current" :values="items" @clickItem="onClickItem"
				styleType="text" activeColor="#008BFF"></uni-segmented-control>
			<uv-divider class="divider" />
			<view class="content">
				<view v-show="current === 0">
					<view class="introduction">
						<text>{{getData.briefIntroduction}}</text>
					</view>
				</view>
				<view v-show="current === 1">
					<view class="list_container">
						<view class="num">共{{num}}集</view>
						<view class="list" v-for="item in file" @click="PlayVideoTo(item)">
							<view class="title">{{item.resourceName}}</view>
							<uv-divider class="divider2" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import Request from '@/js_sdk/luch-request/luch-request/index.js' // 下载的插件
	import useGetGlobalProperties from '@/util/useGlobal.js'
	const urls = useGetGlobalProperties().$https;
	const urlwx = useGetGlobalProperties().$httpUrlWx;
	const staring = urlwx + '/star.png'
	const unstaring = urlwx + '/unstar.png'
	onLoad((option) => {
		if (option.q) {
					let params = decodeURIComponent(option.q)
					let arry = params.split('?');
					let scene = arry[1].split('=');
					getData.value = scene[1];
				}
				if (option.id) {
					console.log(option.id);
					getData.value = option.id;
					console.log(getData.value);
				}
	});
	onMounted(() => {
		init(getData.value)
	});
	const getData = ref({
		bookNmae: ''
	});
	const resourseId = ref();
	const views = ref();
	const img = ref();
	const fileUrl = ref();
	const files = ref();
	const file = ref();
	const num = ref();

	const http = new Request();
	const init = (e) => {
		uni.showLoading({
			'title': '正在加载中'
		})
		resourseId.value = e;
		http.get('/homepage/' + e, {}).then(
		// http.get('/ruralLibrary/resource/getProductResourcesDetails/' + e, {}).then(
			res => {
				getData.value = res.data.data.data;
				getData.value.bookName = getData.value.bookName.substring(0,6);
				views.value = res.data.data.pageView;
				img.value = getData.value.coverPictures[0].coverPictureUrl;
				fileUrl.value = getData.value.file[0].fileUrl
				files.value = getData.value.file[0]
				file.value = getData.value.file
				num.value = getData.value.file.length
				console.log('data.vale', getData.value)
				console.log('img.value', img.value)
				console.log('fileUrl.value.value', fileUrl.value)
				uni.hideLoading();
			})
			let user = uni.getStorageSync('userInfo');
			http.get('/wxApi/collect/getCollect/'+user.openId+'/' + e, {}).then(
			// http.get('/wxApi/collect/getCollect/'+'oq1uW6yNXNizxfWzeZY0UgfHmdlc'+'/' + e, {}).then(
				res => {
					console.log('getCollect',res)
					data.stars = res.data==0? false:true;
					// uni.hideLoading();
				})
	}
	const selectObj = ref([]);
	const stars = async () => {
		let user = uni.getStorageSync('userInfo');
		let code = '';
		const book = uni.getStorageSync('vedio');
		data.stars = data.stars == false ? true : false;
		if (data.stars == true) {
			uni.showToast({
				title: '收藏成功!',
				icon: 'success',
				duration: 1500,
				mask: false
			});
			uni.request({
				url: urls + '/wxApi/collect/add',
				method: 'POST',
				data: {
					openId: user.openId,
					resourceId: resourseId.value,
					dataTypeId: book
				},
				success: (res) => {
					console.log('start', res.data)
				}
			})
			return;
		} else if (data.stars == false) {
			uni.showToast({
				title: '已取消收藏!',
				icon: 'success',
				duration: 1500,
				mask: false
			});
			selectObj.value.push(resourseId.value);
			const ids = [resourseId.value];
			uni.request({
				url: urls +'/wxApi/collect/remove/'+resourseId.value,
				method: 'GET',
				success: (res) => {
					console.log('start', res.data)
				}
			})

		}


	}
	const items = ref(['简介', '目录']);
	const current = ref(0);

	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
		}
	};
	const list = reactive({
		list: [{
			titile: '第9集河南坠子《偷年糕》.mp4',
		}],
	})
	const play = () => {
		uni.setStorageSync('videoUrl',file.value[0]);
		// console.log('ooo',file.value[0].fileUrl)
		let str = file.value[0].fileUrl;
		console.log('ooo',file.value[0].fileUrl)
		console.log('ooo',str)
		if(str.substring(0,28)=='https://culture.hnbxwhy.com/')
		{	
		uni.navigateTo({	  
		      url: '/pages/index/webview/webview?url=' +encodeURIComponent(str)
		
		    });
		}else{
		uni.navigateTo({
			url: '/pages/index/playVideo/playVideo'
		})	
		}
	}
	const PlayVideoTo = (e)=>{
		uni.setStorageSync('videoUrl',e);
		console.log('ooo',file.value[0].fileUrl)
		let str = file.value[0].fileUrl;
		console.log('ooo',str)
		console.log('ooo',str.substring(0,28))
		if(str.substring(0,28)==' https://culture.hnbxwhy.com/')
		{
			 console.log('字符串以http://或https://开头');
		}else{
		uni.navigateTo({
			url: '/pages/index/playVideo/playVideo'
		})	
		}
		
	}
	const data = reactive({
		list: [{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				name: '三国演义'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				name: '水浒传'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				name: '西游记'
			}
		],
		categoty: [
			'电子书',
			'有声图书',
			'报纸'
		],
		stars: false
	});
	// const stars = () => {
	// 	data.stars = data.stars == false ? true : false;
	// 	if (data.stars == true) {
	// 		uni.showToast({
	// 			title: '收藏成功!',
	// 			icon: 'success',
	// 			duration: 1500,
	// 			mask: false
	// 		});
	// 		return;
	// 	} else if (data.stars == false) {
	// 		uni.showToast({
	// 			title: '已取消收藏!',
	// 			icon: 'success',
	// 			duration: 1500,
	// 			mask: false
	// 		});
	// 	}
	// }
	const customStyle = ref({
		height: '95rpx',
		background: '#3c9cff',
		color: '#fff',
		borderRadius: '10rpx',
		boxShadow: "0rpx 4rpx 25rpx 0rpx rgba(0,139,255,0.5)"
	});
	const customStyle2 = ref({
		border: 'none',
		height: '100rpx',
		background: '#F6F7F9',
		color: '#475054',
		borderRadius: '10rpx'
	});
</script>

<style>
	.ellipsis {
		max-width: 160rpx;
		height: 40rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.teacher_study {}

	.study {
		/* 添加这行代码 */

		color: #4E5969 !important;
	}

	.title {
		font-size: 32rpx;
	}

	.file_icon2 {
		width: 45rpx;
		height: 45rpx;
		margin-left: auto;
		margin-right: 0;
		margin-top: -10px;
	}

	.list {
		margin-top: 15rpx;
	}

	.mb {
		display: flex;
		color: #86909C;
		margin-top: 5rpx;

	}

	.mb_font {
		margin-left: 8rpx;
		font-size: 28rpx;
		margin-top: 3rpx;
	}

	.file_icon {
		width: 30rpx;
		height: 28rpx;
		margin-top: 10rpx;

	}

	.num {
		color: #86909C;
	}

	.list_container {
		padding: 0rpx 52rpx;
		position: relative;
		bottom: 25rpx;

	}

	.introduction {
		padding-top: 15rpx;
		padding-right: 60rpx;
		padding-left: 40rpx;
		text-align: justify;
		/* 设置为两端对齐 */
		line-height: 60rpx;
		text-indent: 2em;
		/* 在每一行的开头都添加两个空格的缩进 */
		color: #4E5969;
		font-size: 31rpx;
	}

	.controller {
		width: 374rpx;
		height: 84rpx;
		position: relative;
	}

	.segmentedControl {
		margin-top: 48rpx;
	}

	.itemNum {
		position: relative;
		left: 10rpx;
		top: 1rpx;
		color: #51575e;
	}

	.item {
		word-break: keep-all;
		/* 添加这行代码 */
	}

	.name {
		word-break: keep-all;
		/* 添加这行代码 */
		position: absolute;
		left: 80rpx;
	}

	.chapter {
		margin-top: 20rpx;
	}

	.image-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.image-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		/* 添加相对定位 */
		border-radius: 10rpx;
		margin-right: 20rpx;
		/* 		margin-bottom: 5px; */
	}

	.image-text {
		text-align: center;
		margin-top: 6px;
		font-size: 30rpx;
	}

	.like {
		margin-left: 30rpx;
		font-size: 32rpx;
	}

	.divider {
		position: relative;
		bottom: 35rpx;
	}

	.divider2 {
		position: relative;
		bottom: 5rpx;
	}

	.text {
		padding-top: 15rpx;
		padding-right: 60rpx;
		padding-left: 40rpx;
		text-align: justify;
		/* 设置为两端对齐 */
		line-height: 60rpx;
		text-indent: 2em;
		/* 在每一行的开头都添加两个空格的缩进 */
		color: #4E5969;
		font-size: 31rpx;
	}

	.collect {
		background-color: lawngreen;
		color: black;
	}

	.read_button {
		margin-top: 32rpx;
		margin-left: 30rpx;
	}

	.reading_times {
		display: flex;
		position: relative;
		left: 310rpx;
		bottom: 5rpx;
	}

	.publication_time {
		display: flex;
		align-items: center;
		position: absolute;
		top: 220rpx;
		white-space: nowrap;
		/* 添加这行代码 */
	}

	.press {
		margin-top: 170rpx;
		display: flex;
		align-items: center;
	}

	.detail {
		position: relative;
		top: 16rpx;
		left: 15rpx;
		padding-right: 50rpx;
	}

	.author {
		display: flex;
		position: absolute;
		top: 100rpx;

	}

	.bookDeatil {
		display: flex;
		/* 使用 Flex 布局 */
		margin-left: 30rpx;
		white-space: nowrap;
		/* 添加这行代码 */
	}

	.bookImage {
		margin-right: 10px;
		/* 可根据需要调整图片和文字之间的间距 */
	}

	.container {
		position: relative;
		top: 100rpx;
		bottom: 200rpx;
		font-family: my-font;

		padding-bottom: 300rpx;
		line-height: 24px;
	}
</style>